<template>
	<view class="comments-container">
		<scroll-view scroll-y="true" class="scroll">
			<view class="score-container flex justify-between card align-center">
				<view class="score flex-grow">
					4.7
				</view>
				<view class="score-info">
					<view class="info-title p2">
						差评数
					</view>
					<view class="info-num font-bold">
						{{comments.stat.negative}}
					</view>
				</view>
				<view class="line"></view>
				<view class="score-info">
					<view class="info-title p2">
						好评率
					</view>
					<view class="info-num font-bold">
						{{ (comments.stat.best?comments.stat.best:0/comments.stat.count?comments.stat.count:0)*100 }}%
					</view>
				</view>
			</view>
			<view class="comments-list">
				<view class="comments-item card" v-for="item in comments.list" :key="item.product_id">
					<view class="item-top flex justify-between">
						<view class="user-info flex">
							<view class="avatar">
								<image :src="item.avatar" mode="widthFix" class="image"></image>
							</view>
							<view class="info">
								<view class="nickname font-bold">
									{{item.nickname}}
								</view>
								<view class="time p2">
									{{item.create_time}}
								</view>
							</view>
						</view>
						<view class="menu">
							...
						</view>
					</view>
					<view class="item-tags flex p2 margin-top">
						<span class="score">满意度: {{item.rate}}分</span>
						<span class="score">产品{{item.product_score}}分</span>
						<span class="score">运输{{item.postage_score}}分</span>
						<span class="score">服务{{item.service_score}}分</span>
					</view>
					<view class="comments-text margin-top">
						{{item.comment}}
					</view>
					<!-- <image src="@/pages/plantGrass/static/images/plant_bg.jpg" mode="heightFix" class="image"></image> -->
					<view class="comments-image-container flex margin-top">
						<view class="image-container" v-for="item in item.pics" :key="index" 
							:style="{background:`url(${item}) no-repeat`,}"
							:class="item.pics && item.pics.length>2?'out-2':''"
						></view>
					</view>
					<view class="shop-container" v-if="item.merchant_reply_content">
						<view class="shop-title font-bold">
							商家回复
						</view>
						<view class="shop-content p2">
							{{item.merchant_reply_content}}
						</view>
					</view>
					<view class="comments-bottom margin-top flex justify-between">
						<view class="p2 up-num" v-if="item.sku">
							<span>TA的购买：{{item.sku}}</span>
						</view>
						<!-- <view class="up-container flex">
							<view class="up-image">
								<image src="@/pages/short_video/components/index/zan01.png" mode="widthFix" class="image"></image>
							</view>
							<view class="up-num p2">
								123
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<Load :show="true" :state="state"></Load>
			<view class="bottom-view">
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getShopComments } from '@/api/localLife/shopDetail.js'

import Load from './load.vue';
export default{
	components:{Load},
	data(){
		return {
			comments:{},
			state:0
		}
	},
	props:{
		id:{
			type:Number,
		}
	},
	created() {
		this.togetShopComments();
	},
	methods:{
		togetShopComments(){
			this.state = 0
			getShopComments(this.id).then((res)=>{
				this.comments = res.data;
				this.state = 2
			})
		}
	}
}
</script>

<style scoped lang="scss">
.flex{
	display: flex;
}
.flex-grow{
	flex-grow: 1;
}
.align-center{
	align-items: center;
}
.justify-between{
	justify-content: space-between;
}
.p2{
	color: #666666;
	font-size: 24rpx;
}
.font-bold{
	font-weight: bold;
}
.image{
	height: 100%;
	width: 100%;
}
.margin-top{
	margin-top: 12rpx;
}
.card{
	background-color: white;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 18rpx;
}
.line{
	height: 60rpx;
	border-right: 3rpx solid #c6c6c6;
	margin:0 8rpx ;
}
	
.comments-container{
	height: 100%;
	overflow: hidden;
	padding: 20rpx;
	background-color: #f9f9f9;
	.scroll{
		height: 100%;
		overflow: hidden;
	}
	
	.score-container{
		.score{
			font-size: 56rpx;
			font-weight: bold;
			color: #fa6e0e;
			
		}
		.info-num{
			font-size: 30rpx;
		}
	}
	
	.comments-list{
		.comments-item{
			.item-tags{
				.score{
					margin-right: 8rpx;
				}
			}
			.item-top{
				.user-info{
					.avatar{
						height: 70rpx;
						width: 70rpx;
						border-radius: 50%;
						overflow: hidden;
					}
					.info{
						margin-left: 8rpx;
						.nickname{
							font-size: 28rpx;
						}
					}
				}
			}
			
			.comments-text{
				line-height: 42rpx;
				letter-spacing: 2rpx;
			}
			
			.comments-image-container{
				flex-wrap: wrap;
				.image-container{
					background-repeat: no-repeat !important;
					background-size: 100% 100% !important;
					height: 200rpx;
					padding-top: calc(50% - 12rpx);
					width: calc(50% - 12rpx);
					border-radius: 18rpx;
					margin-bottom: 12rpx;
				}
				.out-2{
					padding-top: calc(33% - 8rpx);
					width: calc(33% - 8rpx);
				}
				.image-container:nth-child(3n-1){
					margin: 0 12rpx;
				}
			}
			
			.shop-container{
				background-color: #f3f3f3;
				border-radius: 16rpx;
				padding: 20rpx;
				.shop-title{
					color: #333333;
					font-size: 26rpx;
				}
				.shop-content{
					margin-top: 8rpx;
				}
			}
			
			.comments-bottom{
				.up-container{
					align-items: center;
					justify-content: flex-end;
					.up-image{
						height: 32rpx;
						width: 32rpx;
					}
					.up-num{
						margin-left: 8rpx;
					}
				}
			}
		}
	}
}
.bottom-view{
	height: 120rpx;
	width: 100%;
}
</style>